<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<div class="gameApp">
    <div class="sounds">
        <!--存放一些音乐、音效-->
        <!-- -->
        <audio src="sound/高三碎片.mp3" preload="auto" id="warBgm"></audio>
        <audio src="sound/号角.mp3" id="bigPika" preload="auto"></audio>
        <audio src="sound/large_gun_fire1.ogg" id="ArtilleryLunch" preload="auto"></audio>
        <audio src="sound/large_gun_fire2.ogg" id="ArtilleryBomb" preload="auto"></audio>
        <audio src="sound/missile_fire.ogg" id="MissileLunch" preload="auto"></audio>
        <audio src="sound/missile_hit.ogg" id="MissileBomb" preload="auto"></audio>
        <audio src="sound/zappyshot_01.mp3" id="zap" preload="auto"></audio>
    </div>
    <div class="main-interface interface">
        <h1>Cannon War</h1>
        <h2>炮塔战争</h2>
        <div class="btnList">
            <button class="startGame">开始游戏</button>
            <button class="help">帮助说明</button>
            <button class="wiki">游戏图鉴</button>
        </div>

        <div class="leftTopArea">
            <button class="soundSet">
                <audio src="sound/炮塔与战争.mp3" id="bgm" controls="controls" autoplay loop>
                    你的浏览器不支持播放
                </audio>
            </button>
        </div>
    </div>
    <div class="help-interface interface" style="display: none">

        <div class="content">
            <h2 class="helpTitle">帮助说明</h2>
            <p>点击右侧按钮，再点击画布就可以放置新建筑了。</p>
            <p>取消放置新建筑可以按右键</p>
            <p>点击敌人可以查看信息</p>
            <p>点击舞台上的建筑可以对其进行升级，尤其是建筑显示绿色剪头的时候，就表示可以升级了</p>
            <h2 class="helpTitle">帮助视频（可能需要加载一会儿）</h2>
            <video src="mov/help_x264.mp4" controls="controls"></video>
        </div>


        <div class="leftTopArea">
            <button class="backPage">返回</button>
        </div>
    </div>

    <div class="modeChoice-interface interface" style="display: none">
        <h1>Mode Choice</h1>
        <h2>模式选择</h2>
        <div class="btnList">
            <div class="btnArea">
                <button class="endlessMode-easy">无尽波数-简单</button>
                <p>敌人种类比较少，不会有强力的敌人</p>
            </div>
            <div class="btnArea">
                <button class="endlessMode-normal">无尽波数-普通</button>
                <p>敌人种类全面，敌人血量上限提高，血量上限随着波数的增加速度提高</p>
            </div>
            <div class="btnArea">
                <button class="endlessMode-hard">无尽波数-困难</button>
                <p>敌人种类全面，每波数量更多，每波种类更多，BOSS关更加困难，资金更少</p>
            </div>
            <!--            其他-->
            <div class="btnArea">
                <button class="infiniteTimeMode-easy">无尽时间-简单</button>
                <p>敌人种类比较少，不会有强力的敌人</p>
            </div>
            <div class="btnArea">
                <button class="infiniteTimeMode-hard">无尽时间-困难</button>
                <p>。。。。</p>
            </div>
        </div>
        <div class="leftTopArea">
            <button class="backPage">返回</button>
        </div>
    </div>

    <div class="wiki-interface interface" style="display: none">
        <h1>CannonWar wiki</h1>
        <h2>炮塔战争图鉴</h2>
        <div class="btnList">
            <button class="cannonList">Cannon</button>
            <button class="monsterList">Monster</button>
        </div>
        <div class="leftTopArea">
            <button class="backPage">返回</button>
        </div>
    </div>

    <div class="cannon-interface interface" style="display: none">
        <h1>Cannons</h1>
        <h2>炮塔大全</h2>
        <div class="content">

        </div>
        <div class="leftTopArea">
            <button class="backPage">返回</button>
        </div>
    </div>

    <div class="monsters-interface interface" style="display: none">
        <h1>Monsters</h1>
        <h2>敌人大全</h2>
        <div class="content">

        </div>
        <div class="leftTopArea">
            <button class="backPage">返回</button>
        </div>
    </div>

    <!--    游戏战斗界面  -->
    <div class="interface war-interface" style="display: none">
        <canvas width="1200" height="780" id="mainCanvas"></canvas>
        <div class="rightTopArea">
            <button class="backPage">返回</button>
            <button class="pause">暂停</button>
        </div>
        <!--一个小升级窗口-->
        <div id="smallLevelUpPanel" style="display: none">
            <p><span class="name"></span>可以升级为：</p>
            <div class="levelUpItems">
                <!--这个盒子里的内容会不断清空更新-->
            </div>
            <div class="otherItems">
                <!--  这个盒子里的内容也会不断清空-->
                <!--  <div class="item">降级</div>-->
                <!--  <div class="item">卖钱</div>-->
            </div>
        </div>

    </div>

</div>
<div class="choiceBtn" style="display: none">

    <div class="initPanel"></div>

    <div class="choicePanel" style="display: none">
        <div class="monsterData">
            <p>名字：<span class="monsterName"></span></p>
            <p>细节描述：<span class="monsterComment"></span></p>
        </div>
    </div>

</div>
<script src="model/staticInitData.js"></script>
<script src="sound/sounds.js"></script>
<script src="model/myColor.js"></script>
<script src="model/functions.js"></script>
<script src="model/vector.js"></script>
<script src="model/circle.js"></script>
<script src="model/line.js"></script>

<script src="model/circleObject.js"></script>
<script src="model/lineObject.js"></script>
<script src="model/rectangle.js"></script>
<script src="effect/effect.js"></script>
<script src="effect/effectCircle.js"></script>
<script src="effect/effectLine.js"></script>

<script src="bullys/bully.js"></script>
<script src="bullys/bullyFinally.js"></script>
<script src="towers/tower.js"></script>
<script src="towers/towerLaser.js"></script>
<script src="towers/towerHell.js"></script>
<script src="towers/towerHammer.js"></script>
<script src="towers/towerBoomerang.js"></script>
<script src="towers/towerRay.js"></script>
<script src="towers/towerFinally.js"></script>
<script src="buildings/building.js"></script>
<script src="buildings/buildingFinally.js"></script>

<script src="monster/monster.js"></script>
<script src="monster/monsterShooter.js"></script>
<script src="monster/monsterMortis.js"></script>
<script src="monster/monsterTerminator.js"></script>
<script src="monster/monsterFinally.js"></script>
<script src="monster/monsterGroup.js"></script>

<script src="world.js"></script>

<script src="index.js"></script>
</body>

</html>
<!--
    更新计划：
    核弹，核辐射
    瑞科反弹子弹

    新增内容：
    震爆炮塔：攻击了会麻痹瘫痪一小段时间

    地雷：
    瞬间伤害地雷、
    合并陷阱、分散陷阱、强制分裂陷阱

    敌人：
    具有像黑暗王子一样的护盾，抵抗单次高溢出伤害
    周期性隐身

    其他更新：
    做一个仓库栈显示

    建筑升级系统：
    判断建筑是否可以升级，建筑有一个属性叫：
    可选择的升级列表建筑的属性，
    判断里面是否有可以升级的建筑，
    如果有的话，显示这个建筑可以升级
    建筑可以点击，点击了之后右边的按钮会变成这个建筑可以升级的列表
    同时增加一个时间几乎无限长的特效来圈主当前这个建筑。
    打印这个建筑的基础信息。名字
    如果点击了其中的一个可以升级成的建筑，那么就会立刻删除这个建筑，
    然后新建一个升级后了的那个建筑，同时扣除相应的金钱。
    同时界面会更新成当前的这个升级后了的建筑

    如果点击了别处空白地方，右边的按钮面板会变成初始面板。
    如果点击了敌人，会把敌人的信息展示在右边的面板上。
    如果敌人突然死了，则右边的敌人信息面板就会消失，变成初始面板
-->
